<template>
    <div>
            <div id="dataCard">
                <el-card class="box-card"> 
                    <div class="box-card-div">
                        <el-avatar :size="80" :src="circleUrl">
                        <div id="box-card-solid-div">
                            <i class="el-icon-message-solid"/>
                        </div>
                        </el-avatar>
                        <div class="box-card-text-div">
                        <span>13</span>
                        <br>
                        <span>代收费数据（条）</span>
                        </div>
                    </div>
                </el-card>

                <el-card class="box-card"> 
                    <div class="box-card-div">
                        <el-avatar :size="80" :src="circleUrl">
                        <div  id="box-card-card-div">
                            <i class="el-icon-bank-card"/>
                        </div>
                        </el-avatar>
                        <div class="box-card-text-div">
                        <span>13208.5</span>
                        <br>
                        <span>待收费金额（元）</span>
                        </div>
                    </div>
                </el-card>

                <el-card class="box-card"> 
                    <div class="box-card-div">
                        <el-avatar :size="80" :src="circleUrl">
                        <div id="box-card-ticket-div">
                            <i class="el-icon-s-ticket"/>
                        </div>
                        </el-avatar>
                        <div class="box-card-text-div">
                        <span>9</span>
                        <br>
                        <span>欠费数据（条）</span>
                        </div>
                    </div>
                </el-card>

                <el-card class="box-card"> 
                    <div class="box-card-div">
                        <el-avatar :size="80" :src="circleUrl">
                        <div id="box-card-order-div">
                            <i class="el-icon-s-order"/>
                        </div>
                        </el-avatar>
                        <div class="box-card-text-div">
                        <span>13196</span>
                        <br>
                        <span>欠费金额（元）</span>
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="echartsDiv">
                <div class="piediv">
                    <el-card class="fontDiv"> 
                        <span class="echartsspan">商铺租售情况</span>
                    </el-card>

                    <el-card class="echartspie-card"> 
                        <div id="echartspie" style="with:100%;height:350px">
                        </div>
                    </el-card>
                </div> 

                <div class="piediv">
                    <el-card class="fontDiv"> 
                        <span class="echartsspan">月度收费</span>
                    </el-card>

                    <el-card class="echartsbar-card"> 
                        <div id="echartsbar" style="with:100%;height:350px">
                        </div>
                    </el-card>
                </div>
            </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
    export default {
        name:"homePage",
                                            mounted() {
                                    const bar =
                                    echarts.init(document.getElementById('echartsbar'));
                                    bar.setOption({
                                    xAxis: {
                                    type: 'category',
                                    data: ['2023-05', '2023-06',
                                    '2023-07', '2023-08', '2023-09', '2023-10']
                                    },
                                    yAxis: {
                                    type: 'value'
                                    },
                                    series: [
                                    {
                                    data: [0, 0, 0, 0, 0, 110],
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: {
                                    color: 'rgba(180, 180, 180,0.2)'
                                    }
                                    }
                                    ]
                                    });
                                    const pie =
                                    echarts.init(document.getElementById('echartspie'));
                                    pie.setOption({
                                    title: {
                                    text: '商铺租售比率',
                                    left: 'center'
                                    },
                                    tooltip: {
                                    trigger: 'item'
                                    },
                                    legend: {
                                    orient: 'vertical',
                                    bottom: 'bottom'
                                    },
                                    series: [
                                    {
                                    name: '比例',
                                    type: 'pie',
                                    radius: '50%',
                                    data: [
                                    { value: 1048, name: '出售' },
                                    { value: 735, name: '出租' },
                                    { value: 580, name: '空置' }
                                    ],
                                    emphasis: {
                                    itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0,0.5)'
                                    }
                                    }
                                    }
                                    ]
                                    });
                                    },
                                        }
                    
    
</script>

<style lang="less" scoped>
    #dataCard{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    padding-right: 10px;
    }

    .box-card{
    width:100%;
    height:100%;
    margin:10px 0px 10px 10px
    }

    .box-card-div{
    display: flex;
    }

    #box-card-solid-div{
    background-color: #F2EBFB;
    line-height: 80px;
    }

    #box-card-card-div{
    background-color: #EDF8FE;
    line-height: 80px;
    }

    #box-card-ticket-div{
    background-color: #FFF7E4;
    line-height: 80px;
    }

    #box-card-order-div{
    background-color: #FFF2F5;
    line-height: 80px;
    }

    .el-icon-message-solid{
    color: #7B1AE1;
    font-size: 40px;
    margin-top: 20px;
    }

    .el-icon-bank-card{
    color: #4AB8FF;
    font-size: 40px;
    margin-top: 20px;
    }

    .el-icon-s-ticket{
    color: #FF8B58;
    font-size: 40px;
    margin-top: 20px;
    }

    .el-icon-s-order{
    color: #FC5B87;
    font-size: 40px;
    margin-top: 20px;
    }

    .box-card-text-div{
    text-align: left;
    margin-left: 10px;
    margin-top: 17px
    }
    .echartsspan{
        border-left: 4px solid #1890FF;
        padding-left: 10px;
    }
    .echartsDiv{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        margin:10px 0px 10px 10px
    }
    .piediv{
        width: 100%;
        margin-right: 10px;
    }
    .fontDiv{
        width: 100%;
    }
    .echartsbar-card{
        width: 100%;
        height: 100%;
    }
    .echartspie-card{
        width: 100%;
        height: 100%;
    }

</style>